<example name="Form">
  <file name="index.html">
    <div style="width: 700px">
      <form class="ring-form">
        <span class="ring-form__title">Form Title</span>

        <div class="ring-form__group">
          <label for="ring-form-1" class="ring-form__label">Full-Width
            Input</label>
          <div class="ring-form__control">
            <input class="ring-input" id="ring-form-1" type="text">
          </div>
        </div>

        <div class="ring-form__group">
          <label for="ring-form-2" class="ring-form__label">Medium Input</label>
          <div class="ring-form__control">
            <input class="ring-input ring-input-size_md" id="ring-form-2"
              type="text">
          </div>
        </div>

        <div class="ring-form__group">
          <label for="ring-form-3" class="ring-form__label">Medium Input & Error</label>
          <div class="ring-form__control">
            <input class="ring-input ring-input_error ring-input-size_md"
              id="ring-form-3" type="text">
            <div class="ring-error-bubble active">Error bubble</div>
          </div>
        </div>

        <div class="ring-form__group">
          <label for="ring-form-4" class="ring-form__label">Long Input</label>
          <div class="ring-form__control">
            <input class="ring-input ring-input-size_l" id="ring-form-4"
              type="text">
            <div class="ring-error-bubble active">Error bubble for a long
              control
            </div>
          </div>
        </div>

        <div class="ring-form__group">
          <label for="ring-form-5" class="ring-form__label">Full-Width
            Control</label>
          <div class="ring-form__control">
            <input class="ring-input" id="ring-form-5" type="text">
            <div class="ring-error-bubble active">Error bubble for a full-width
              control
            </div>
          </div>
        </div>

        <div class="ring-form__group">
          <label for="ring-form-7" class="ring-form__label">Textarea</label>
          <div class="ring-form__control">
            <textarea class="ring-input ring-input-size_md"
              id="ring-form-7"></textarea>
          </div>
        </div>

        <div class="ring-form__group">
          <label for="ring-form-8" class="ring-form__label">Long
            Textarea</label>
          <div class="ring-form__control">
            <textarea class="ring-input ring-input-size_l"
              id="ring-form-8"></textarea>
          </div>
        </div>

        <div class="ring-form__group">
          <label for="ring-form-9" class="ring-form__label">Full-Width
            Textarea</label>
          <div class="ring-form__control">
            <textarea class="ring-input" id="ring-form-9"></textarea>
          </div>
        </div>

        <div class="ring-form__group">
          <label for="ring-form-11" class="ring-form__label">Input in
            a small container</label>
          <div class="ring-form__control ring-form__control_small">
            <input class="ring-input ring-input-size_md" id="ring-form-11"
              type="text">
          </div>
        </div>

        <div class="ring-form__group">
          <label for="ring-form-12" class="ring-form__label">Textarea in
            a small container</label>
          <div class="ring-form__control ring-form__control_small">
            <textarea class="ring-input ring-input-size_md"
              id="ring-form-12"></textarea>
          </div>
        </div>

        <div class="ring-form__footer">
          <button class="ring-button ring-button_blue">Save</button>
          <button class="ring-button">Cancel</button>
        </div>
      </form>
    </div>
  </file>

  <file name="index.js">
    import '@jetbrains/ring-ui/components/input/input.scss';
    import '@jetbrains/ring-ui/components/form/form.scss';
    import '@jetbrains/ring-ui/components/panel/panel.scss';
    import '@jetbrains/ring-ui/components/button/button.scss';
    import '@jetbrains/ring-ui/components/input-size/input-size.scss';
  </file>
</example>
